/* eslint-disable react-native/no-inline-styles */
import React, {useState} from 'react';
import {connect} from 'react-redux';
import {Dimensions, DeviceEventEmitter} from 'react-native';
import {Text, View, Card, Colors} from 'react-native-ui-lib';
import Logo from '@/components/Logo';
import Input from '@/components/Input';
import AntdIcons from 'react-native-vector-icons/AntDesign';
import {useRequest} from 'ahooks';
import {post} from '@/utils/request';
import * as Animatable from 'react-native-animatable';
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

let {width, height} = Dimensions.get('window');
let reg_tel = /^\d{11}$/;

function SignIn(props) {
  let {
    route: {params},
    navigation,
    appTheme,
    dispatch,
    statusbars,
  } = props;
  const insets = useSafeAreaInsets();
  const [username, setusername] = useState();
  const [password, setpassword] = useState();
  const [pwd, setpwd] = useState();

  const [status, setstatus] = useState(null);

  const {run, loading} = useRequest(post, {
    manual: true,
    formatResult: res => res,
    onSuccess: result => {
      if (result?.code === 0) {
        navigation.goBack();
      }
    },
  });

  let userprops = {
    placeholder: '用户名',
    value: username,
    lefticon: 'user',
    allowClear: true,
    onChange: val => {
      setusername(val);
      if (!val) {
        setstatus('empty');
        return;
      }
      setstatus(null);
    },
  };

  let passwordprops = {
    placeholder: '密码',
    value: password,
    lefticon: 'lock1',
    type: 'password',
    allowClear: true,
    onChange: val => {
      setpassword(val);
      if (!val) {
        setstatus('empty');
        return;
      }
      setstatus(null);
    },
  };

  let pwdprops = {
    placeholder: '确认密码',
    value: pwd,
    lefticon: 'lock1',
    type: 'password',
    allowClear: true,
    onChange: val => {
      setpwd(val);
      if (!val) {
        setstatus('empty');
        return;
      }
      setstatus(null);
    },
  };

  return (
    <View
      flex-1
      center
      style={{
        backgroundColor: Colors.backgroundColor,
        paddingTop: insets.top,
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
      }}>
      <View style={{height: height / 2}} paddingT-24 top centerH>
        <View
          width={width / 1.2}
          height={32}
          row
          style={{justifyContent: 'flex-start'}}>
          <Card
            style={{
              width: 38,
              height: 38,
              backgroundColor: Colors.backgroundColor,
            }}
            left
            enableShadow={false}
            onPress={() => {
              navigation.goBack();
            }}>
            <AntdIcons name="left" size={22} color={Colors.headingColor} />
          </Card>
        </View>
        <Logo status={status} appTheme={appTheme} />
        <Text
          heading
          marginT-8
          marginB-28
          onPress={() => {
            dispatch({
              type: 'CHANGE_THEME',
              appTheme: appTheme == 'light' ? 'dark' : 'light',
            });
            dispatch({
              type: 'CHANGE_STATUSBAR',
              statusbars:
                appTheme == 'light'
                  ? {
                      ...statusbars,
                      backgroundColor: '#333333',
                      barStyle: 'light-content',
                    }
                  : {
                      ...statusbars,
                      backgroundColor: '#FFFFFF',
                      barStyle: 'dark-content',
                    },
            });
          }}>
          注册
        </Text>
        <Input {...userprops} />

        <View marginV-12>
          <Input {...passwordprops} />
        </View>
        <Input {...pwdprops} />
      </View>
      <View flex-1 centerH>
        <Card
          style={{
            width: 66,
            height: 66,
            backgroundColor:
              username && password && pwd
                ? Colors.primaryColor
                : Colors.cardbackgroundColor,
          }}
          borderRadius={88}
          center
          onPress={() => {
            if (!(username && password && pwd)) {
              return;
            }

            if (pwd !== password) {
              DeviceEventEmitter.emit('toast', {
                message: '两次密码不一致',
                type: 'warning',
              });
              return;
            }

            run('/system/user', {
              account: username,
              password: password,
            });
          }}>
          {loading ? (
            <Animatable.View animation={'rotate'} iterationCount={6}>
              <AntdIcons
                name="loading1"
                size={24}
                color={username && password && pwd ? Colors.white : '#999'}
              />
            </Animatable.View>
          ) : (
            <AntdIcons
              name="arrowright"
              size={24}
              color={username && password && pwd ? Colors.white : '#999'}
            />
          )}
        </Card>
      </View>
    </View>
  );
}

const mapStateToProps = state => {
  return {
    appTheme: state.appTheme,
    statusbars: state.statusbars,
    vftime: state.vftime,
  };
};

export default connect(mapStateToProps)(SignIn);
